<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>商品评价 - 社交商城</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      margin: 0;
      padding-bottom: 15px;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    /* 评分概览 */
    .rating-overview {
      background-color: #fff;
      padding: 20px 15px;
      text-align: center;
      border-bottom: 1px solid #eee;
    }
    
    .average-rating {
      font-size: 40px;
      font-weight: 700;
      color: #ff9500;
      margin-bottom: 5px;
    }
    
    .rating-stars {
      color: #ff9500;
      margin-bottom: 10px;
    }
    
    .rating-count {
      color: #666;
      font-size: 14px;
      margin-bottom: 15px;
    }
    
    .rating-distribution {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .rating-level {
      width: 40px;
      font-size: 14px;
      text-align: right;
      padding-right: 10px;
    }
    
    .rating-bar-container {
      flex: 1;
      height: 6px;
      background-color: #eee;
      border-radius: 3px;
      overflow: hidden;
    }
    
    .rating-bar {
      height: 100%;
      background-color: #ff9500;
    }
    
    .rating-percentage {
      width: 50px;
      font-size: 14px;
      padding-left: 10px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #ff4d4f;
      color: white;
    }
    
    /* 评论筛选 */
    .comment-filter {
      background-color: #fff;
      padding: 10px 0;
      overflow-x: auto;
      border-bottom: 1px solid #eee;
    }
    
    .filter-tabs {
      display: flex;
      min-width: 100%;
      padding: 0 15px;
    }
    
    .filter-tab {
      padding: 5px 15px;
      font-size: 14px;
      white-space: nowrap;
      color: #666;
      border-bottom: 2px solid transparent;
    }
    
    .filter-tab.active {
      color: #ff4d4f;
      border-bottom-color: #ff4d4f;
      font-weight: 500;
    }
    
    /* 通用评论页面样式 */
    .comments-page {
      display: none;
    }
    
    .comments-page.active {
      display: block;
    }
    
    /* 评论列表容器 */
    .comments-container {
      padding: 10px 15px;
    }
    
    /* 评论项基础样式 */
    .comment-item {
      background-color: #fff;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    
    .comment-header {
      display: flex;
      margin-bottom: 10px;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
    }
    
    .user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .user-info {
      flex: 1;
    }
    
    .user-name {
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .comment-time {
      font-size: 12px;
      color: #999;
    }
    
    .comment-rating {
      color: #ff9500;
    }
    
    .comment-content {
      margin-bottom: 10px;
      line-height: 1.6;
    }
    
    .comment-images {
      display: flex;
      gap: 5px;
      margin-bottom: 10px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .comment-image {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
    }
    
    .comment-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .comment-actions {
      display: flex;
      color: #999;
      font-size: 13px;
    }
    
    .comment-action {
      display: flex;
      align-items: center;
      margin-right: 15px;
      cursor: pointer;
    }
    
    .comment-action i {
      margin-right: 3px;
    }
    
    .comment-spec {
      font-size: 12px;
      color: #999;
      padding: 5px 10px;
      background-color: #f9f9f9;
      border-radius: 4px;
      margin-bottom: 10px;
      display: inline-block;
    }
    
    .seller-reply {
      background-color: #f9f9f9;
      padding: 10px;
      border-radius: 4px;
      margin-top: 10px;
    }
    
    .reply-title {
      font-weight: 500;
      margin-bottom: 5px;
      font-size: 14px;
      color: #666;
    }
    
    .reply-content {
      font-size: 14px;
      color: #333;
    }
    
    /* 样式1 - 标准布局 */
    .standard-comments .comment-item {
      border: 1px solid #eee;
    }
    
    /* 样式2 - 简约布局 */
    .simple-comments .comment-item {
      padding: 10px 15px;
      margin-bottom: 5px;
      background-color: transparent;
    }
    
    .simple-comments .comment-header {
      margin-bottom: 5px;
    }
    
    .simple-comments .comment-images {
      margin-bottom: 5px;
    }
    
    .simple-comments .comment-actions {
      display: none;
    }
    
    /* 样式3 - 强调图片布局 */
    .image-comments .comment-item {
      padding: 15px;
    }
    
    .image-comments .comment-images {
      margin-bottom: 15px;
    }
    
    .image-comments .comment-image {
      width: 100px;
      height: 100px;
    }
    
    .image-comments .has-images {
      border-left: 3px solid #ff4d4f;
    }
    
    /* 样式4 - 详细布局 */
    .detailed-comments .comment-item {
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
      margin-bottom: 15px;
    }
    
    .detailed-comments .comment-meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 13px;
      color: #666;
    }
    
    .detailed-comments .comment-helpful {
      color: #ff4d4f;
      font-weight: 500;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">商品评价</h1>
    <a href="#" class="nav-btn" id="writeCommentBtn">
      <i class="fa fa-pencil"></i>
    </a>
  </nav>
  
  <!-- 评分概览 -->
  <div class="rating-overview">
    <div class="average-rating">4.8</div>
    <div class="rating-stars">
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star-half-o"></i>
    </div>
    <div class="rating-count">基于 326 条评价</div>
    
    <div class="rating-distribution">
      <div class="rating-level">5星</div>
      <div class="rating-bar-container">
        <div class="rating-bar" style="width: 85%;"></div>
      </div>
      <div class="rating-percentage">85%</div>
    </div>
    <div class="rating-distribution">
      <div class="rating-level">4星</div>
      <div class="rating-bar-container">
        <div class="rating-bar" style="width: 10%;"></div>
      </div>
      <div class="rating-percentage">10%</div>
    </div>
    <div class="rating-distribution">
      <div class="rating-level">3星</div>
      <div class="rating-bar-container">
        <div class="rating-bar" style="width: 3%;"></div>
      </div>
      <div class="rating-percentage">3%</div>
    </div>
    <div class="rating-distribution">
      <div class="rating-level">2星</div>
      <div class="rating-bar-container">
        <div class="rating-bar" style="width: 1%;"></div>
      </div>
      <div class="rating-percentage">1%</div>
    </div>
    <div class="rating-distribution">
      <div class="rating-level">1星</div>
      <div class="rating-bar-container">
        <div class="rating-bar" style="width: 1%;"></div>
      </div>
      <div class="rating-percentage">1%</div>
    </div>
  </div>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="standard">标准布局</div>
      <div class="style-tab" data-style="simple">简约布局</div>
      <div class="style-tab" data-style="image">强调图片</div>
      <div class="style-tab" data-style="detailed">详细布局</div>
    </div>
  </div>
  
  <!-- 评论筛选 -->
  <div class="comment-filter">
    <div class="filter-tabs">
      <div class="filter-tab active">全部评价</div>
      <div class="filter-tab">有图评价</div>
      <div class="filter-tab">好评 (287)</div>
      <div class="filter-tab">中评 (25)</div>
      <div class="filter-tab">差评 (14)</div>
    </div>
  </div>
  
  <!-- 样式1 - 标准布局 -->
  <div class="comments-page active standard-comments" id="standard">
    <div class="comments-container">
      <div class="comment-item">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1001/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">阳光女孩</div>
            <div class="comment-time">2023-06-15</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
        </div>
        
        <div class="comment-spec">颜色：白色 | 尺码：M</div>
        
        <div class="comment-content">
          衣服质量很好，纯棉材质穿着很舒服，透气性也不错，夏天穿很合适。尺码标准，按照平时穿的尺码购买正好。白色很百搭，已经推荐给朋友了。
        </div>
        
        <div class="comment-images">
          <div class="comment-image">
            <img src="https://picsum.photos/id/21/200/200" alt="评论图片">
          </div>
          <div class="comment-image">
            <img src="https://picsum.photos/id/22/200/200" alt="评论图片">
          </div>
        </div>
        
        <div class="seller-reply">
          <div class="reply-title">商家回复：</div>
          <div class="reply-content">感谢亲的喜爱和认可，我们会继续努力提供更好的产品和服务，期待您的再次光临！</div>
        </div>
        
        <div class="comment-actions">
          <div class="comment-action" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 有用 (42)
          </div>
          <div class="comment-action" onclick="showToast('已回复')">
            <i class="fa fa-reply"></i> 回复
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1002/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">旅行者</div>
            <div class="comment-time">2023-06-10</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star-o"></i>
          </div>
        </div>
        
        <div class="comment-spec">颜色：黑色 | 尺码：L</div>
        
        <div class="comment-content">
          面料不错，是纯棉的，洗了一次没有缩水，也没有掉色。就是感觉尺码稍微有点偏大，不过宽松版型也还好，总体满意。
        </div>
        
        <div class="comment-actions">
          <div class="comment-action" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 有用 (18)
          </div>
          <div class="comment-action" onclick="showToast('已回复')">
            <i class="fa fa-reply"></i> 回复
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1003/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">时尚达人</div>
            <div class="comment-time">2023-06-05</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
        </div>
        
        <div class="comment-spec">颜色：蓝色 | 尺码：XL</div>
        
        <div class="comment-content">
          这件T恤性价比很高，颜色很正，和图片上一样没有色差。版型是宽松的，穿着很舒服，夏天搭配牛仔裤或者短裤都很好看。已经买了两件不同颜色的了。
        </div>
        
        <div class="comment-images">
          <div class="comment-image">
            <img src="https://picsum.photos/id/23/200/200" alt="评论图片">
          </div>
          <div class="comment-image">
            <img src="https://picsum.photos/id/24/200/200" alt="评论图片">
          </div>
          <div class="comment-image">
            <img src="https://picsum.photos/id/25/200/200" alt="评论图片">
          </div>
        </div>
        
        <div class="comment-actions">
          <div class="comment-action" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 有用 (65)
          </div>
          <div class="comment-action" onclick="showToast('已回复')">
            <i class="fa fa-reply"></i> 回复
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 简约布局 -->
  <div class="comments-page simple-comments" id="simple">
    <div class="comments-container">
      <div class="comment-item">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1001/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">阳光女孩</div>
            <div class="comment-time">2023-06-15</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
        </div>
        
        <div class="comment-content">
          衣服质量很好，纯棉材质穿着很舒服，透气性也不错，夏天穿很合适。
        </div>
        
        <div class="comment-images">
          <div class="comment-image">
            <img src="https://picsum.photos/id/21/200/200" alt="评论图片">
          </div>
          <div class="comment-image">
            <img src="https://picsum.photos/id/22/200/200" alt="评论图片">
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1002/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">旅行者</div>
            <div class="comment-time">2023-06-10</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star-o"></i>
          </div>
        </div>
        
        <div class="comment-content">
          面料不错，是纯棉的，洗了一次没有缩水，也没有掉色。就是感觉尺码稍微有点偏大。
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1003/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">时尚达人</div>
            <div class="comment-time">2023-06-05</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
        </div>
        
        <div class="comment-content">
          这件T恤性价比很高，颜色很正，和图片上一样没有色差。版型是宽松的，穿着很舒服。
        </div>
        
        <div class="comment-images">
          <div class="comment-image">
            <img src="https://picsum.photos/id/23/200/200" alt="评论图片">
          </div>
          <div class="comment-image">
            <img src="https://picsum.photos/id/24/200/200" alt="评论图片">
          </div>
          <div class="comment-image">
            <img src="https://picsum.photos/id/25/200/200" alt="评论图片">
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式3 - 强调图片布局 -->
  <div class="comments-page image-comments" id="image">
    <div class="comments-container">
      <div class="comment-item has-images">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1001/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">阳光女孩</div>
            <div class="comment-time">2023-06-15</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
        </div>
        
        <div class="comment-spec">颜色：白色 | 尺码：M</div>
        
        <div class="comment-images">
          <div class="comment-image">
            <img src="https://picsum.photos/id/21/200/200" alt="评论图片">
          </div>
          <div class="comment-image">
            <img src="https://picsum.photos/id/22/200/200" alt="评论图片">
          </div>
        </div>
        
        <div class="comment-content">
          衣服质量很好，纯棉材质穿着很舒服，透气性也不错，夏天穿很合适。尺码标准，按照平时穿的尺码购买正好。
        </div>
        
        <div class="comment-actions">
          <div class="comment-action" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 有用 (42)
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1002/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">旅行者</div>
            <div class="comment-time">2023-06-10</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star-o"></i>
          </div>
        </div>
        
        <div class="comment-spec">颜色：黑色 | 尺码：L</div>
        
        <div class="comment-content">
          面料不错，是纯棉的，洗了一次没有缩水，也没有掉色。就是感觉尺码稍微有点偏大，不过宽松版型也还好，总体满意。
        </div>
        
        <div class="comment-actions">
          <div class="comment-action" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 有用 (18)
          </div>
        </div>
      </div>
      
      <div class="comment-item has-images">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1003/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">时尚达人</div>
            <div class="comment-time">2023-06-05</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
        </div>
        
        <div class="comment-spec">颜色：蓝色 | 尺码：XL</div>
        
        <div class="comment-images">
          <div class="comment-image">
            <img src="https://picsum.photos/id/23/200/200" alt="评论图片">
          </div>
          <div class="comment-image">
            <img src="https://picsum.photos/id/24/200/200" alt="评论图片">
          </div>
          <div class="comment-image">
            <img src="https://picsum.photos/id/25/200/200" alt="评论图片">
          </div>
        </div>
        
        <div class="comment-content">
          这件T恤性价比很高，颜色很正，和图片上一样没有色差。版型是宽松的，穿着很舒服，夏天搭配牛仔裤或者短裤都很好看。
        </div>
        
        <div class="comment-actions">
          <div class="comment-action" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 有用 (65)
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式4 - 详细布局 -->
  <div class="comments-page detailed-comments" id="detailed">
    <div class="comments-container">
      <div class="comment-item">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1001/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">阳光女孩 <span style="color:#ff4d4f;font-size:12px;">优质评价</span></div>
            <div class="comment-time">2023-06-15 14:30</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
        </div>
        
        <div class="comment-spec">颜色：白色 | 尺码：M | 购买渠道：官方旗舰店</div>
        
        <div class="comment-meta">
          <div>穿着体验：非常舒适</div>
          <div>面料质感：柔软亲肤</div>
        </div>
        
        <div class="comment-content">
          衣服质量很好，纯棉材质穿着很舒服，透气性也不错，夏天穿很合适。尺码标准，按照平时穿的尺码购买正好。白色很百搭，已经推荐给朋友了。洗了两次没有变形，也没有起球，性价比很高。
        </div>
        
        <div class="comment-images">
          <div class="comment-image">
            <img src="https://picsum.photos/id/21/200/200" alt="评论图片">
          </div>
          <div class="comment-image">
            <img src="https://picsum.photos/id/22/200/200" alt="评论图片">
          </div>
        </div>
        
        <div class="seller-reply">
          <div class="reply-title">商家回复：</div>
          <div class="reply-content">感谢亲的喜爱和认可，我们会继续努力提供更好的产品和服务，期待您的再次光临！</div>
        </div>
        
        <div class="comment-actions">
          <div class="comment-action comment-helpful" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 42人觉得有用
          </div>
          <div class="comment-action" onclick="showToast('已回复')">
            <i class="fa fa-reply"></i> 回复
          </div>
          <div class="comment-action" onclick="showToast('已举报')">
            <i class="fa fa-flag-o"></i> 举报
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <div class="user-avatar">
            <img src="https://picsum.photos/id/1002/100/100" alt="用户头像">
          </div>
          <div class="user-info">
            <div class="user-name">旅行者</div>
            <div class="comment-time">2023-06-10 09:15</div>
          </div>
          <div class="comment-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star-o"></i>
          </div>
        </div>
        
        <div class="comment-spec">颜色：黑色 | 尺码：L | 购买渠道：活动促销</div>
        
        <div class="comment-meta">
          <div>穿着体验：比较舒适</div>
          <div>面料质感：一般</div>
        </div>
        
        <div class="comment-content">
          面料不错，是纯棉的，洗了一次没有缩水，也没有掉色。就是感觉尺码稍微有点偏大，不过宽松版型也还好，总体满意。物流速度很快，第二天就收到了，包装也很完整。
        </div>
        
        <div class="comment-actions">
          <div class="comment-action" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 18人觉得有用
          </div>
          <div class="comment-action" onclick="showToast('已回复')">
            <i class="fa fa-reply"></i> 回复
          </div>
          <div class="comment-action" onclick="showToast('已举报')">
            <i class="fa fa-flag-o"></i> 举报
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const commentsPages = document.querySelectorAll('.comments-page');
    const filterTabs = document.querySelectorAll('.filter-tab');
    const backBtn = document.getElementById('backBtn');
    const writeCommentBtn = document.getElementById('writeCommentBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        commentsPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 筛选切换
    filterTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        filterTabs.forEach(t => t.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 返回按钮
    backBtn.addEventListener('click', function() {
      showToast('返回商品详情');
    });
    
    // 写评论按钮
    writeCommentBtn.addEventListener('click', function() {
      showToast('写评价');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          toast.style.display = 'none';
          toast.style.opacity = '1';
        }, 300);
      }, 2000);
    }
  </script>
</body>
</html>
